<template>
  <el-form :model="formData" label-width="150px">
    <el-form-item label="套段外径（ mm ）">
      <el-select v-model="formData.outerDiameter" placeholder="外 径（ mm ）">
        <el-option
          v-for="item in outerDiameterData"
          :value="item.value"
          :label="item.label"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="套管内径（ mm ）">
      <el-select v-model="formData.innerDiameter" placeholder="内 径（ mm ）">
        <el-option
          v-for="item in innerDiameter"
          :value="item.value"
          :label="item.label"
      /></el-select>
    </el-form-item>
    <el-form-item label="套管顶部深度 （ m ）">
      <el-input-number
        v-model="formData.top"
        class="mx-4"
        :min="0"
        controls-position="right"
      />
    </el-form-item>
    <el-form-item label="套管底部深度（ m ）">
      <el-input-number
        v-model="formData.bottom"
        class="mx-4"
        :min="0"
        controls-position="right"
      />
    </el-form-item>
    <el-form-item label="单位质量（ kg/m ）">
      <el-input-number
        v-model="formData.weight"
        class="mx-4"
        :min="0"
        controls-position="right"
      />
    </el-form-item>
  </el-form>
</template>

<script setup>
import * as d3 from "d3";
import { drawLine, drawCurve } from "@/api/line.ts";
import { reactive } from "vue";
import d3DrawStore from "@/store/modules/d3Draw";
const d3Store = d3DrawStore();
const formData = reactive({
  top: null,
  bottom: null,
  outerDiameter: 48.28,
  innerDiameter: 22.67,
  weight: 0,
});
const lineLeft = ref(null);
const outerDiameterData = reactive([
  { value: 48.26, label: "48.26" },
  { value: 60.32, label: "60.32" },
  { value: 73.02, label: "73.02" },
  { value: 88.9, label: "88.90" },
  { value: 101.6, label: "101.60" },
  { value: 114.3, label: "114.30" },
]);
const innerDiameter = reactive([
  { value: 26.67, label: "26.67" },
  { value: 33.4, label: "33.40" },
  { value: 42.16, label: "42.16" },
  { value: 48.26, label: "48.26" },
  { value: 60.32, label: "60.32" },
  { value: 73.02, label: "73.02" },
]);
watch(formData, (newVal, oldVal) => {
  if (newVal.top == null) {
    drawCasings(newVal.top, newVal.bottom);
  }
});
</script>
